<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prototype Form and AJAX(JSON) Demo</title>

<!-- Disable caching -->
<meta HTTP-EQUIV="Pragma" content="no-cache" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />

<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/prettify.css">

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/prettify.js"></script>

<script type="text/javascript" src="javascript/widget.js"></script>
<script type="text/javascript" src="javascript/main.js"></script>

<script type="text/javascript" src="demo.js"></script>

</head>
<body onload="myonLoad()">
<!-- below required for widgets -->
<!-- <embed type="application/x-systeminfo-widget" hidden="yes"></embed> -->
<div id="waitpic">
<img src="images/loading.gif">
</div>
<h2>Prototype Form and AJAX(JSON) Demo</h2>
<hr />
<p></p>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" class="current">Welcome</a></li>
<li><a href="#">sayHi</a></li>
<li><a href="#">AJAX Form</a></li>
<li><a href="#">JSON</a></li>
</ul>
</div>
<div id="content">

<!-- TAB1 ---------------------------------->
<div id="tab1">
<p>
<input type="button" value="Welcome" onClick="ajaxUpdater('welcome', 'ajax/welcome.php')" /> <br/>
</p>
<hr />
<div id="welcome"> -- </div>
<hr />
<p>
<code class="prettyprint">
function ajaxUpdater(id, path) {
  var this_url = base_url + path;
  new Ajax.Updater(id, this_url, {asynchronous:true});
}
</code>
</p>
</div>

<!-- TAB2 ---------------------------------->
<div class="tab" id="tab2">
<p>
<div>
	<label for="hi-name">Enter your name:</label>
	<input id="hi-name" name="hi-name" type="text" value="Tom" />
</div>
<input type="button" value="Hi" onClick="sayHello('hi', 'ajax/hi.php')" /> <br/>
</p>
<hr />
<p>
<div id="hi"> -- </div>
</p>
<hr />
<p>
<code class="prettyprint">
function sayHello(id, path){
  var this_url = base_url + path;
  var pars = 'hi-name='+escape($F('hi-name'));
  var myAjax = new Ajax.Updater(id, this_url, {method: 'get', parameters: pars});
}
</code>
</p>
</div>

<!-- TAB3 ---------------------------------->
<div class="tab" id="tab3">
<p>
<form id="loginForm">
UserName: <input id="username" name="username" value="Bob" /><br />
Password: <input id="password" name="password" type="password" value="Secret" /><br/>
<input type="button" value="Login" onClick="sendAjaxLogin('loginForm', 'loginResult');" /> 
</form>
</p>
<hr />
<div id="loginResult"> -- Not Logged in -- </div>
<hr />
<p>
<code class="prettyprint">
function sendAjaxLogin(form, id)
{
  var this_url = base_url + "ajax/ajax_login.php";
  var pars = $(form).serialize();
  var myAjax = new Ajax.Updater(id, this_url, {method: 'post', parameters: pars});
}
</code>
</p>
</div>

<!-- TAB4 ---------------------------------->
<div class="tab" id="tab4">
<p>
<input type="button" value='test JSON' onclick='test_json();' />
</p>
<hr />
<div>JSON Result: <br /><span id="tab4_result">This data will be replaced.</span></div>
<hr />
<p>

<div style="display:none;">
<textarea id="table_template">
<table border="1">
<thead><tr>#{heads}</tr></thead>
<tbody>
  #{rows}
</tbody>
</table>
</textarea>
</div>

<div style="display:none;">
<textarea id="headcell_template">
<th>#{hname}</th>
</textarea>
</div>

<div style="display:none;">
<textarea id="row_template">
<tr><td>#{product}</td><td>#{price}</td><td>#{quantity}</td></tr>
</textarea>
</div>

<code class="prettyprint">
</code>
</p>
</div>


</body>
</html>
